<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>威客任务推荐 - 社交平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --success: #36D399;
            --warning: #FBBD23;
            --danger: #F87272;
            --dark: #1D2939;
            --light: #F9FAFB;
            --gray: #667085;
            --border: #E5E7EB;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            padding-top: 20px;
            padding-bottom: 60px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .layout-tabs {
            margin-bottom: 2rem;
            background-color: white;
            border-radius: 8px;
            padding: 0.5rem;
            box-shadow: var(--shadow);
        }
        
        .task-section {
            margin-bottom: 3rem;
        }
        
        .section-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1.25rem;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .task-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .task-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        
        .task-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .task-body {
            padding: 1.25rem;
        }
        
        .task-footer {
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }
        
        .task-meta {
            display: flex;
            align-items: center;
            color: var(--gray);
            gap: 1.5rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .task-actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.2s;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.bookmarked {
            color: var(--warning);
        }
        
        /* 列表布局样式 */
        .list-layout .task-card {
            display: flex;
            flex-direction: row;
            height: 100%;
        }
        
        .list-layout .task-media {
            flex: 0 0 200px;
            position: relative;
        }
        
        .list-layout .task-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 网格布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-layout .task-media {
            height: 180px;
            position: relative;
        }
        
        /* 媒体区域样式 */
        .task-media {
            overflow: hidden;
        }
        
        .task-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .task-card:hover .task-image {
            transform: scale(1.05);
        }
        
        .no-image {
            width: 100%;
            height: 100%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 2rem;
        }
        
        .image-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
        }
        
        /* 任务标题和描述 */
        .task-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            transition: color 0.2s;
        }
        
        .task-card:hover .task-title {
            color: var(--primary);
        }
        
        .task-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 价格标签 */
        .price-tag {
            display: inline-block;
            background-color: var(--success);
            color: white;
            padding: 3px 10px;
            border-radius: 4px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        /* 作者信息 */
        .task-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.95rem;
            color: var(--dark);
        }
        
        .author-level {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 紧凑布局样式 */
        .compact-layout .task-card {
            padding: 1rem;
            display: flex;
            align-items: center;
        }
        
        .compact-layout .task-media {
            flex: 0 0 80px;
            height: 80px;
            margin-right: 1rem;
        }
        
        .compact-layout .task-content {
            flex: 1;
        }
        
        .compact-layout .task-title {
            margin-bottom: 0.25rem;
            font-size: 1rem;
        }
        
        .compact-layout .task-description {
            display: none;
        }
        
        .compact-layout .task-footer {
            padding: 0;
            border: none;
        }
        
        .compact-layout .task-author {
            margin-bottom: 0;
        }
        
        /* 标签样式 */
        .task-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .task-tag {
            background-color: var(--light);
            color: var(--gray);
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        /* 筛选器样式 */
        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-label {
            font-weight: 500;
            color: var(--gray);
        }
        
        .form-select, .form-control {
            border-color: var(--border);
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 0.9rem;
        }
        
        .btn-filter {
            background-color: white;
            border: 1px solid var(--border);
            color: var(--dark);
            padding: 6px 16px;
            border-radius: 6px;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        
        .btn-filter:hover, .btn-filter.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .list-layout .task-card {
                flex-direction: column;
            }
            
            .list-layout .task-media {
                flex: 0 0 180px;
            }
            
            .task-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
            
            .task-meta {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .filters {
                gap: 0.75rem;
            }
            
            .filter-group {
                width: 100%;
            }
            
            .filter-label {
                width: 80px;
                flex-shrink: 0;
            }
            
            .form-select, .form-control {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">威客任务推荐</h1>
            <p class="page-description">发现适合您的任务，展示您的技能，获取报酬</p>
        </div>
        
        <!-- 筛选器 -->
        <div class="filters">
            <div class="filter-group">
                <span class="filter-label">分类:</span>
                <select class="form-select">
                    <option value="">全部分类</option>
                    <option value="design">设计类</option>
                    <option value="development">开发类</option>
                    <option value="writing">写作类</option>
                    <option value="marketing">营销类</option>
                    <option value="video">视频类</option>
                </select>
            </div>
            
            <div class="filter-group">
                <span class="filter-label">价格:</span>
                <select class="form-select">
                    <option value="">全部价格</option>
                    <option value="0-100">￥0-100</option>
                    <option value="100-500">￥100-500</option>
                    <option value="500-1000">￥500-1000</option>
                    <option value="1000+">￥1000以上</option>
                </select>
            </div>
            
            <div class="filter-group">
                <span class="filter-label">排序:</span>
                <select class="form-select">
                    <option value="recommend">推荐</option>
                    <option value="newest">最新发布</option>
                    <option value="price-asc">价格从低到高</option>
                    <option value="price-desc">价格从高到低</option>
                    <option value="hot">热门任务</option>
                </select>
            </div>
            
            <div class="filter-group">
                <input type="text" class="form-control" placeholder="搜索任务...">
            </div>
            
            <div class="filter-group ms-auto">
                <button class="btn-filter active">全部</button>
                <button class="btn-filter">可接取</button>
                <button class="btn-filter">进行中</button>
            </div>
        </div>
        
        <!-- 列表布局任务 -->
        <section class="task-section">
            <h2 class="section-title">
                <i class="fas fa-list"></i> 最新推荐任务
            </h2>
            <div class="list-layout">
                <!-- 任务1：多图展示 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=1" alt="网站UI设计任务预览" class="task-image">
                        <div class="image-count">3图</div>
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥800</div>
                            <h3 class="task-title">企业官网UI设计，需要现代简约风格</h3>
                            <div class="task-tags">
                                <span class="task-tag">UI设计</span>
                                <span class="task-tag">网站</span>
                                <span class="task-tag">现代风格</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要为我们的科技公司设计一个现代简约风格的官网UI，包含首页、产品展示页、关于我们和联系页面。要求设计风格简洁大方，符合科技公司形象，注重用户体验。交付物包括设计源文件和切图。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=101" alt="张先生的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">张先生</div>
                                    <div class="author-level">企业认证 · 发布12个任务</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>245</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>32</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>3天前发布</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>42</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>18</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务2：无图展示 -->
                <div class="task-card">
                    <div class="task-media">
                        <div class="no-image">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥300</div>
                            <h3 class="task-title">撰写一篇关于人工智能发展趋势的文章</h3>
                            <div class="task-tags">
                                <span class="task-tag">文案写作</span>
                                <span class="task-tag">人工智能</span>
                                <span class="task-tag">科技</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要一篇关于人工智能最新发展趋势的文章，要求内容详实，有数据支撑，语言通俗易懂。字数要求1500-2000字，结构清晰，包含引言、正文和结论。文章需原创，不得抄袭。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=102" alt="李编辑的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">李编辑</div>
                                    <div class="author-level">个人认证 · 发布8个任务</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>187</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>15</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>1天前发布</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>27</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>9</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务3：单图展示 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=3" alt="移动应用开发任务预览" class="task-image">
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥5000</div>
                            <h3 class="task-title">健身记录APP开发，需要iOS和Android版本</h3>
                            <div class="task-tags">
                                <span class="task-tag">移动开发</span>
                                <span class="task-tag">健身</span>
                                <span class="task-tag">iOS</span>
                                <span class="task-tag">Android</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要开发一款健身记录APP，功能包括运动记录、饮食跟踪、健身计划制定、数据统计等。要求支持iOS和Android双平台，UI设计简洁易用，性能稳定。需要提供完整的源代码和技术文档。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=103" alt="王经理的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">王经理</div>
                                    <div class="author-level">企业认证 · 发布23个任务</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>562</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>78</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>5天前发布</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>124</span>
                                </button>
                                <button class="action-btn bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                    <span>56</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 网格布局任务 -->
        <section class="task-section">
            <h2 class="section-title">
                <i class="fas fa-th"></i> 热门任务
            </h2>
            <div class="grid-layout">
                <!-- 网格任务1：单图 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=4" alt="Logo设计任务预览" class="task-image">
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥500</div>
                            <h3 class="task-title">咖啡馆Logo设计，需要温馨风格</h3>
                            <div class="task-tags">
                                <span class="task-tag">Logo设计</span>
                                <span class="task-tag">餐饮</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">为新开的咖啡馆设计Logo，风格要求温馨、文艺，能够体现咖啡的温暖和舒适感。需要提供3-5个设计方案供选择。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=104" alt="陈老板的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">陈老板</div>
                                    <div class="author-level">个人认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>328</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>45</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>67</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格任务2：多图 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=5" alt="产品拍摄任务预览" class="task-image">
                        <div class="image-count">5图</div>
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥1200</div>
                            <h3 class="task-title">电子产品拍摄，需要白底图和场景图</h3>
                            <div class="task-tags">
                                <span class="task-tag">摄影</span>
                                <span class="task-tag">产品</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要为我们的新产品（智能手表）拍摄产品图片，包括白底图和场景图，要求图片清晰，能够展示产品细节和使用场景。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=105" alt="刘主管的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">刘主管</div>
                                    <div class="author-level">企业认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>215</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>23</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>38</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格任务3：无图 -->
                <div class="task-card">
                    <div class="task-media">
                        <div class="no-image">
                            <i class="fas fa-pencil-alt"></i>
                        </div>
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥200</div>
                            <h3 class="task-title">产品说明书翻译，中译英</h3>
                            <div class="task-tags">
                                <span class="task-tag">翻译</span>
                                <span class="task-tag">英语</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要将一份产品说明书从中文翻译成英文，要求翻译准确，专业术语使用正确，语言流畅。文档约5000字。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=106" alt="赵经理的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">赵经理</div>
                                    <div class="author-level">企业认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>176</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>24</span>
                                </button>
                                <button class="action-btn bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格任务4：单图 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=6" alt="社交媒体营销任务预览" class="task-image">
                    </div>
                    <div class="task-content">
                        <div class="task-header">
                            <div class="price-tag">￥1500</div>
                            <h3 class="task-title">社交媒体营销推广，增加品牌曝光</h3>
                            <div class="task-tags">
                                <span class="task-tag">营销</span>
                                <span class="task-tag">社交媒体</span>
                            </div>
                        </div>
                        <div class="task-body">
                            <p class="task-description">需要为我们的新品牌进行社交媒体营销推广，包括内容策划、发布和互动，目标是提高品牌知名度和粉丝数量。</p>
                            <div class="task-author">
                                <img src="https://picsum.photos/100/100?random=107" alt="孙总监的头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">孙总监</div>
                                    <div class="author-level">企业认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>342</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-comment"></i>
                                    <span>56</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>89</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 紧凑布局任务 -->
        <section class="task-section">
            <h2 class="section-title">
                <i class="fas fa-th-list"></i> 快速浏览任务
            </h2>
            <div class="compact-layout">
                <!-- 紧凑任务1：无图 -->
                <div class="task-card">
                    <div class="task-media">
                        <div class="no-image">
                            <i class="fas fa-code"></i>
                        </div>
                    </div>
                    <div class="task-content">
                        <h3 class="task-title">网站BUG修复，解决响应式布局问题</h3>
                        <div class="task-author">
                            <img src="https://picsum.photos/100/100?random=108" alt="郑开发的头像" class="author-avatar">
                            <div class="author-info">
                                <div class="author-name">郑开发</div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>98</span>
                                </div>
                                <div class="meta-item">
                                    <span class="price-tag" style="margin-bottom: 0;">￥300</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>12</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑任务2：单图 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=7" alt="视频剪辑任务预览" class="task-image">
                    </div>
                    <div class="task-content">
                        <h3 class="task-title">产品宣传视频剪辑，1分钟左右</h3>
                        <div class="task-author">
                            <img src="https://picsum.photos/100/100?random=109" alt="吴编导的头像" class="author-avatar">
                            <div class="author-info">
                                <div class="author-name">吴编导</div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>210</span>
                                </div>
                                <div class="meta-item">
                                    <span class="price-tag" style="margin-bottom: 0;">￥1000</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>34</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑任务3：多图 -->
                <div class="task-card">
                    <div class="task-media">
                        <img src="https://picsum.photos/400/300?random=8" alt="室内设计任务预览" class="task-image">
                        <div class="image-count">2图</div>
                    </div>
                    <div class="task-content">
                        <h3 class="task-title">小户型室内设计，北欧风格</h3>
                        <div class="task-author">
                            <img src="https://picsum.photos/100/100?random=110" alt="林设计师的头像" class="author-avatar">
                            <div class="author-info">
                                <div class="author-name">林设计师</div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>176</span>
                                </div>
                                <div class="meta-item">
                                    <span class="price-tag" style="margin-bottom: 0;">￥3000</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>45</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑任务4：无图 -->
                <div class="task-card">
                    <div class="task-media">
                        <div class="no-image">
                            <i class="fas fa-language"></i>
                        </div>
                    </div>
                    <div class="task-content">
                        <h3 class="task-title">市场调研报告撰写，关于新能源汽车</h3>
                        <div class="task-author">
                            <img src="https://picsum.photos/100/100?random=111" alt="何顾问的头像" class="author-avatar">
                            <div class="author-info">
                                <div class="author-name">何顾问</div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="task-meta">
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>143</span>
                                </div>
                                <div class="meta-item">
                                    <span class="price-tag" style="margin-bottom: 0;">￥2500</span>
                                </div>
                            </div>
                            <div class="task-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>28</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                
                // 判断是点赞还是收藏按钮
                if (icon.classList.contains('fa-heart')) {
                    // 点赞功能
                    if (icon.classList.contains('far')) {
                        // 未点赞 -> 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'liked');
                        this.classList.add('liked');
                        if (countElem) {
                            countElem.textContent = parseInt(countElem.textContent) + 1;
                        }
                    } else {
                        // 已点赞 -> 取消点赞
                        icon.classList.remove('fas', 'liked');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        if (countElem) {
                            countElem.textContent = parseInt(countElem.textContent) - 1;
                        }
                    }
                } else if (icon.classList.contains('fa-bookmark')) {
                    // 收藏功能
                    if (icon.classList.contains('far')) {
                        // 未收藏 -> 收藏
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'bookmarked');
                        this.classList.add('bookmarked');
                    } else {
                        // 已收藏 -> 取消收藏
                        icon.classList.remove('fas', 'bookmarked');
                        icon.classList.add('far');
                        this.classList.remove('bookmarked');
                    }
                }
            });
        });
        
        // 筛选按钮切换
        document.querySelectorAll('.btn-filter').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.btn-filter').forEach(b => {
                    b.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>
    
